<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { resetRouter } from '@/router'
import routers from '@/router/routers'
import { filterAsyncRouter, localRead } from '@/utils'
import { clearLoginInfo } from '@/utils/auth'

export default {
  name: 'App',
  mounted() {
    const routesData = localRead('dynamicMenuRoutes')
    if (routesData && routesData.length) {
      const newRoutes = filterAsyncRouter(routesData)
      resetRouter()
      this.$router.addRoutes(newRoutes)
      this.$store.commit('setRoutes', newRoutes.concat(routers))
      this.$store.commit('setLoaded', true)
    } else {
      clearLoginInfo()
      this.$router.push({
        name: 'login'
      })
    }
  }
}
</script>

<style lang="less">
.size {
  width: 100%;
  height: 100%;
}

html,
body {
  .size;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#app {
  .size;
}
</style>
